<template>
  <div class="error-page">
    <div ref="lottie" class="lottie-animate"></div>
    <div class="error-info">
      <p>恭喜！活得了薛定谔的猫</p>
      <p>波粒二象性你应该听说过吧？</p>
      <p>本来是有这个资源的，你观察了就没有了噢</p>

      <nuxt-link class="button" :to="localePath('/')">返回首页</nuxt-link>
    </div>
  </div>
</template>
<script>
import lottie from 'lottie-web'
import astronaut from '@/assets/animate/error.json'
export default {
  head(){
    return {
      title: '好好的系统差点给你整崩了~'
    }
  },
  mounted() {
    this.animateLottie()
  },
  methods: {
    lottieReady() {
      this.lottieIsReady = true
    },
    animateLottie() {
      this.initLottie(astronaut)
    },
    initLottie(data, loop = true) {
      const lottieEl = this.$refs.lottie
      this.lottie = lottie.loadAnimation({
        container: lottieEl,
        renderer: 'svg',
        loop,
        autoplay: true,
        animationData: data,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.error-page {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: calc(100vh - var(--header-height) - 72px);
  .lottie-animate {
    max-width: 300px;
    width: 100%;
  }
  .error-info {
    p {
      line-height: 1.8;
      color: var(--secondary);
      &:last-of-type {
        font-weight: normal;
        color: var(--accents-3);
        text-decoration: line-through;
      }
    }
    .button {
      width: 200px;
      height: 30px;
      margin-top: var(--space-4x);
    }
  }
}
@media screen and (max-width: 900px) {
  .error-page {
    flex-direction: column;
  }
}
</style>
